﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMapsLocationSelection.aspx.cs" Inherits="EPiServer.Municipality.Web.UI.PropertyControls.Dialogs.GoogleMapsLocationSelection" %>
<%@ Register TagPrefix="EPiServerUI" Namespace="EPiServer.UI.WebControls" Assembly="EPiServer.UI" %>
<%@ Register TagPrefix="EPiServerScript" Namespace="EPiServer.ClientScript.WebControls" Assembly="EPiServer" %>
<%@ Register TagPrefix="EPiServerScript" Namespace="EPiServer.UI.ClientScript.WebControls" Assembly="EPiServer.UI" %>

<asp:Content ContentPlaceHolderID="HeaderContentRegion" runat="server">
    <base target="_self" />
</asp:Content>
<asp:Content ContentPlaceHolderID="FullRegion" runat="server">
    <div id="map" style="width: 485px; height: 400px"></div>
    <div style="margin-left: 5px;">
        <p><br />Skriv in en adress i rutan nedan och klicka på sök-knappen för att placera ut platsen på kartan.</p>
    </div>
    <asp:Panel DefaultButton="buttonSearch" style="margin-top: 8px; margin-left: 5px; position: relative;" runat="server">
        <input id="searchTextBox" class="episize240" style="width: 409px; margin-right: 10px;" type="text" />
        <span style="position: absolute; top: -2px;">
            <EPiServerUI:ToolButton ID="buttonSearch" GeneratesPostBack="False" runat="server" OnClientClick="searchAddress(document.getElementById('searchTextBox').value); return false;" 
                Text="<%$ Resources: EPiServer, button.search %>" ToolTip="<%$ Resources: EPiServer, button.search %>" SkinID="Search" />
        </span>
    </asp:Panel>
    
    <div style="position: absolute; bottom: 25px; width: 485px; text-align: right;">
        <asp:HiddenField ID="HiddenFieldLocation" runat="server" />
        <EPiServerUI:ToolButton ID="ToolButton1" GeneratesPostBack="False" runat="server" OnClientClick="onOK();" Text="<%$ Resources: EPiServer, button.select %>" ToolTip="<%$ Resources: EPiServer, button.select %>" SkinID="Check" />
        <EPiServerUI:ToolButton ID="ToolButton2" GeneratesPostBack="False" runat="server" OnClientClick="onNothing();" Text="<%$ Resources: EPiServer, button.clear %>" ToolTip="<%$ Resources: EPiServer, button.clear %>" SkinID="Delete" />
        <EPiServerUI:ToolButton ID="ToolButton3" GeneratesPostBack="False" runat="server" OnClientClick="onCancel();" Text="<%$ Resources: EPiServer, button.cancel %>" ToolTip="<%$ Resources: EPiServer, button.cancel %>" SkinID="Cancel" />
    </div>
    
    <script type="text/javascript">
        //<![CDATA[
        
        var map = null;
        var geocoder = null;
        var marker = null;
        var infowindow = null;
        var returnValue = false;

        function initialize() {
            geocoder = new  google.maps.Geocoder();

            map = new google.maps.Map(document.getElementById("map"));
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            map.setCenter(new google.maps.LatLng(<%= DefaultCenter %>));
            map.setZoom(<%= DefaultZoomLevel %>);
            
            if (document.getElementById("<%= HiddenFieldLocation.ClientID %>").value.length > 0) {
                var coordinates = document.getElementById("<%= HiddenFieldLocation.ClientID %>").value;
                coordinates = coordinates.substring(coordinates.indexOf("(") + 1, coordinates.indexOf(")"));
                coordinates = coordinates.split(",");
                var position = new google.maps.LatLng(coordinates[0], coordinates[1]);
                var address = document.getElementById("<%= HiddenFieldLocation.ClientID %>").value;
                address = address.substring(0, address.indexOf(" ("));
                updatePosition(address,position);
                map.setZoom(<%= CurrentLocationZoomLevel %>);
            }
            
            
            google.maps.event.addListener(map, 'click', function(event) {
                updatePosition(null,event.latLng);
            }); 
            
            google.maps.event.addListener(marker, 'dragend', function(event) {  
                updatePosition(null,event.latLng);
            }); 
        }
        
        function searchAddress(address) {
            if (geocoder) {
                 geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        updatePosition(address,results[0].geometry.location);
                    } else {
                         alert(address + " hittades inte");
                    }
                });
            }
        }

        function updatePosition(address, position) {
            if(!marker) {
                marker = new google.maps.Marker();
            }
            marker.map = map;
            marker.position = position;
            marker.draggable = true;
            marker.setMap(map);

            if (!infowindow) {
                infowindow = new google.maps.InfoWindow();
            }
            
            geocoder.geocode( { 'location': position}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    infowindow.setContent(results[0].formatted_address);
                    var location = results[0].formatted_address + " (" + position.lat() + "," + position.lng() + ")";
                    document.getElementById("<%= HiddenFieldLocation.ClientID %>").value = location;
                } else if(address != null) {
                    infowindow.setContent(address);
                    var location = address + " (" + position.lat() + "," + position.lng() + ")";
                    document.getElementById("<%= HiddenFieldLocation.ClientID %>").value = location;
                } else {
                    alert('Det gick inte att hitta någon adress');
                }
            });
             
            infowindow.open(map, marker);
            map.setCenter(position);
            map.setZoom(<%= CurrentLocationZoomLevel %>);
        }

        function onOK() {
    	    var location = document.getElementById("<%= HiddenFieldLocation.ClientID %>").value;
    	    EPi.GetDialog().dialogArguments.getElementById('<%= Request.QueryString["valueid"] %>').value = location;
    	    EPi.GetDialog().dialogArguments.getElementById('<%= Request.QueryString["displayid"] %>').value = location;
			EPi.GetDialog().Close(true);
		}

		function onNothing() {
			EPi.GetDialog().dialogArguments.getElementById('<%= Request.QueryString["valueid"] %>').value = '';
			EPi.GetDialog().dialogArguments.getElementById('<%= Request.QueryString["displayid"] %>').value = '';
			EPi.GetDialog().Close(true);
		}

		function onCancel() {
			EPi.GetDialog().Close(false);
		}

		function onLoad() {
			window.focus();
			if (this.activeItem) {
				this.activeItem.scrollIntoView(false);
			}
		}
		
		function SetValues(value, info) {
			var doc = EPi.GetDialog().dialogArguments;

			returnValue = true;
		}	
		//]]>
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize" type="text/javascript"></script>
</asp:Content>